<template>
	<div class="statistics">
		<van-sticky>
			<component
				:is="datePicker"
				v-model="date"
				:clearable="false"
			/>
			<van-tabs v-model:active="tabState.active" @change="onTabChange">
				<van-tab v-for="item in tabState.list" :title="item.title" :name="item.value" :key="item.value">
				</van-tab>
			</van-tabs>
		</van-sticky>

		<div class="data-block" v-if="+tabState.active === 1 && showPage">
			<component
				:is="moduleBlock"
				title="房主自查统计"
			>
				<component
					:is="block房主自查统计"
					:date="date"
					@toPage="toPage"
				/>
			</component>

			<component
				:is="moduleBlock"
				v-if="loginInfo.roletype !== 5"
				title="行政区域自查率排名"
			>
				<component
					:is="block行政区域自查率排名"
					:date="date"
					@toPage="toPage"
				/>
			</component>

			<component
				:is="moduleBlock"
				v-if="loginInfo.roletype !== 5"
				title="行政区域发现隐患率统计"
			>
				<component
					:is="block行政区域发现隐患率统计"
					:date="date"
					@toPage="toPage"
				/>
			</component>

			<component
				:is="moduleBlock"
				v-if="loginInfo.roletype !== 5"
				title="行政区域整改隐患率统计"
			>
				<component
					:is="block行政区域整改隐患率统计"
					:date="date"
					@toPage="toPage"
				/>
			</component>
		</div>

		<div class="data-block" v-if="+tabState.active === 2 && showPage">
			<component
				:is="moduleBlock"
				title="检查统计"
			>
				<component
					:is="block房主自查统计_村级"
					:date="date"
					@toPage="toPage"
				/>
			</component>

			<component
				:is="moduleBlock"
				v-if="loginInfo.roletype !== 5"
				title="行政区域检查率排名"
			>
				<component
					:is="block行政区域自查率排名_村级"
					:date="date"
					@toPage="toPage"
				/>
			</component>

			<component
				:is="moduleBlock"
				v-if="loginInfo.roletype !== 5"
				title="行政区域发现隐患率统计"
			>
				<component
					:is="block行政区域发现隐患率统计_村级"
					:date="date"
					@toPage="toPage"
				/>
			</component>

			<component
				:is="moduleBlock"
				v-if="loginInfo.roletype !== 5"
				title="行政区域整改隐患率统计"
			>
				<component
					:is="block行政区域整改隐患率统计_村级"
					:date="date"
					@toPage="toPage"
				/>
			</component>
		</div>

		<div class="data-block" v-if="+tabState.active === 3 && showPage">
			<component
				:is="moduleBlock"
				title="人员疏散通道建设统计"
			>
				<component
					:is="block人员疏散通道1"
					:date="date"
					@toPage="toPage"
					:role="loginInfo.roletype"
				/>
			</component>

			<!-- <component
				:is="moduleBlock"
				title="行政区域安装辅助逃生设施以及固定楼梯通向屋顶的排名"
				hideTitle
			>
				<component
					:is="block行政区域安装辅助逃生设施以及固定楼梯通向屋顶的排名"
					:date="date"
					@toPage="toPage"
				/>
			</component> -->

			<component
				:is="moduleBlock"
				title="窗口护栏拆除"
			>
				<component
					:is="block窗口护栏拆除"
					:date="date"
				/>
				<component
					:is="block行政区域拆除率排名"
					:date="date"
					@toPage="toPage"
				/>
			</component>

			<component
				:is="moduleBlock"
				title="电动自行车违规停放充电"
			>
				<component
					:is="block电动自行车违规停放充电"
					:date="date"
					@toPage="toPage"
				/>
			</component>

			<component
				:is="moduleBlock"
				title="车辆与充电设施配比情况"
			>
				<component
					:is="block车辆与充电设施配比情况"
					:date="date"
					@toPage="toPage"
				/>
			</component>

			<component
				:is="moduleBlock"
				title="违规使用瓶装液化石油气"
			>
				<component
					:is="block违规使用瓶装液化石油气"
					:date="date"
					@toPage="toPage"
				/>
			</component>

			<component
				:is="moduleBlock"
				title="固定警示标牌"
			>
				<component
					:is="block固定警示标牌"
					:date="date"
				/>
				<component
					:is="block行政区域安装率"
					:date="date"
					@toPage="toPage"
				/>
			</component>

		</div>

		<div class="data-block" v-if="+tabState.active === 4 && showPage">
			<component
				:is="moduleBlock"
				title="房屋核验情况统计"
			>
				<component
					:is="block房屋核查情况统计"
					:date="date"
					v-model="verificateRole"
				/>
			</component>

			<component
				:is="moduleBlock"
				title="行政区域核验率排名"
			>
				<component
					:is="block行政区域核查率排名"
					:date="date"
					v-model="verificateRole"
					@toPage="toPage"
				/>
			</component>

			<component
				:is="moduleBlock"
				title="行政区域三层及以上房屋核验进度"
			>
				<component
					:is="block行政区域三层及以上房屋核验进度"
					:date="date"
					v-model="verificateRole"
					@toPage="toPage"
				/>
			</component>
		</div>
	</div>
</template>

<script setup>
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
import datePicker from '@/components/datePicker'
import moduleBlock from './components/moduleBlock'
import { format } from 'date-fns'
import { useRouter, useRoute } from 'vue-router'

import block房主自查统计 from './components/block房主自查统计'
import block行政区域自查率排名 from './components/block行政区域自查率排名'
import block行政区域发现隐患率统计 from './components/block行政区域发现隐患率统计'
import block行政区域整改隐患率统计 from './components/block行政区域整改隐患率统计'

import block房主自查统计_村级 from './components/block房主自查统计_村级'
import block行政区域自查率排名_村级 from './components/block行政区域自查率排名_村级'
import block行政区域发现隐患率统计_村级 from './components/block行政区域发现隐患率统计_村级'
import block行政区域整改隐患率统计_村级 from './components/block行政区域整改隐患率统计_村级'

import block人员疏散通道1 from './components/block人员疏散通道1'
// import block行政区域安装辅助逃生设施以及固定楼梯通向屋顶的排名 from './components/block行政区域安装辅助逃生设施以及固定楼梯通向屋顶的排名'
import block窗口护栏拆除 from './components/block窗口护栏拆除'
import block行政区域拆除率排名 from './components/block行政区域拆除率排名'
import block电动自行车违规停放充电 from './components/block电动自行车违规停放充电'
import block车辆与充电设施配比情况 from './components/block车辆与充电设施配比情况'
import block违规使用瓶装液化石油气 from './components/block违规使用瓶装液化石油气'
import block固定警示标牌 from './components/block固定警示标牌'
import block行政区域安装率 from './components/block行政区域安装率'

import block房屋核查情况统计 from './components/block房屋核查情况统计'
import block行政区域核查率排名 from './components/block行政区域核查率排名'
import block行政区域三层及以上房屋核验进度 from './components/block行政区域三层及以上房屋核验进度'

import { useLoginStore } from '@/store'
import { storeToRefs } from 'pinia'
const loginStore = useLoginStore()
const { loginInfo } = storeToRefs(loginStore)
const router = useRouter()
const route = useRoute()
const showPage = ref(false)

const verificateRole = ref(2)
const date = ref([
    format(new Date(), 'yyyy-MM-dd'),
	format(new Date(), 'yyyy-MM-dd')
])

const tabState = reactive({
	active: 3,
	list: [
		{ title: '房主自查', value: 1 },
		{ title: '防火检查', value: 2 },
		{ title: '房屋核验', value: 4 },
	]
})

const toPage = (data) => {
	if (data?.userCode) {
		router.push({
			name: 'statistics-region',
			query: {
				code: loginInfo.value.regionCode,
				type: String(tabState.active) + data.type,
				date: JSON.stringify(date.value),
				role: loginInfo.value?.roletype,
				roletype: tabState.active === 4 ? verificateRole.value : ''
			}
		})
	} else {
		if ([2, 3].includes(loginInfo.value?.roletype)) {
			router.push({
				name: 'statistics-region',
				query: {
					code: data?.record?.code || data?.record?.villagedm || data?.record?.towndm || data?.record?.xzqdm,
					type: String(tabState.active) + data.type,
					date: JSON.stringify(date.value),
					role: 3,
					roletype: tabState.active === 4 ? verificateRole.value : ''
				}
			})
		}
		if (loginInfo.value?.roletype === 4 && (Math.floor(+(String(tabState.active) + data.type)) === 31)) {
			router.push({
				name: 'statistics-db-data',
				query: {
					code: data?.record?.code || data?.record?.villagedm || data?.record?.towndm || data?.record?.xzqdm,
					type: String(tabState.active) + data.type,
					date: JSON.stringify(date.value)
				}
			})
		}
	}
}

const onTabChange = () => {
	router.replace({
		name: route.name,
		query: {
			active: tabState.active
		}
	})
}

watch(() => date.value, () => {
	showPage.value = false
	nextTick(() => {
		showPage.value = true
	})
}, { deep: true })

watch(() => tabState.active, val => {
	date.value = val === 3 ? [
		'2024-01-01',
		format(new Date(), 'yyyy-MM-dd')
	] : [
		format(new Date(), 'yyyy-MM-dd'),
		format(new Date(), 'yyyy-MM-dd')
	]
}, { immediate: true })

watch(() => loginInfo.value, val => {
	verificateRole.value = val?.roletype
	if (val.roletype !== 5) {
		tabState.list.push({ title: '信息统计', value: 3 })
	}
}, { deep: true, immediate: true })

onMounted(() => {
	tabState.active = +route.query?.active || 1
	showPage.value = true
})
</script>

<style scoped lang="less">
.statistics {
	height: 100%;
	background-image: url(image/page_bg.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-color: #F6F6F6;
	:deep(.date-picker) {
		padding: 24px 32px;
		.date {
			background: #F6F7F8;
			border-radius: 16px;
		}
	}
	:deep(h5) {
		margin-bottom: 12px;
		height: 32px;
		line-height: 32px;
		font-weight: 600;
		position: relative;
		padding-left: 24px;
		&:before {
			content: '';
			position: absolute;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			top: 8px;
			left: 0;
			background: var(--van-primary-color);
		}
	}
	:deep(.block) {
		.item-wrap {
			-ms-overflow-style: none;
			scrollbar-width: none;
			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
}
</style>
